/**
 * 自定义的标题栏
 * 由 WangYu 创建
 * 日期 2017/9/25
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
} from 'react-native';
import {navigationBarColor, titleColor} from "../util/Config";
import {Actions} from "react-native-router-flux";
export default class CommonNavigationBar extends Component {
    static defaultProps={
        showLeftIcon:true,
        backgroundColor:navigationBarColor,
    }

    constructor(props) {
        super(props);
        this.state={
            title:'',
        }
    }


    render() {
        let leftIcon = this.props.showLeftIcon ? <TouchableOpacity onPress={() => {
           this.props.onLeftButtonPress?this.props.onLeftButtonPress(): Actions.pop()
        }}>
            <View style={styles.defaultLeftIconStyle}>
                <Image source={this.props.leftIcong?this.props.leftIcon:require('../../images/fh.png')} style={{height: 15, width: 15}}/>
                <Text style={{color: 'white', fontSize: 16, marginLeft: 5}}>返回</Text>
            </View>
        </TouchableOpacity> : <View style={{width:60}}/>;
        let rightIcon =  <TouchableOpacity onPress={this.props.onRightIconPress} style={{width:60}}>
            <Image source={this.props.rightIcon} style={{height: 44, width: 60,}} resizeMode={'center'}/>
        </TouchableOpacity>
        return (
            <View style={[styles.container, {backgroundColor: this.props.backgroundColor}]}>
                {leftIcon}
                <Text style={styles.title}>{this.props.title}</Text>
                {rightIcon}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        height: 44,
        flexDirection: 'row'
    },
    title: {
        fontSize: 18,
        color: titleColor,
        flex: 1,
        textAlign: 'center',
        textAlignVertical: 'center',
    },
    defaultLeftIconStyle: {
        width: 60,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
        paddingLeft: 10,
        flex:1,
    },
});
